<template>
  <section class="reset-wrapper">
    <div class="top-wrapper">
      <div class="img">
        <img src="../../assets/image/login_logo.png"/>
      </div>
    </div>
    <div class="main-wrapper">
      <el-form class="form-content" ref="form">
        <div class="input-title">修改密码</div>
        <nb-form
          placeholder="原密码"
          v-model="resetModel.old"
          required=":请输入原密码"
          type="password"
          prop="old"
        ></nb-form>
        <nb-form
          placeholder="新密码"
          v-model="resetModel.password"
          required="isPassword"
          type="password"
          prop="password"
        ></nb-form>
        <nb-form
          placeholder="确认新密码"
          v-model="resetModel.password2"
          required="isPassword"
          type="password"
          prop="password2"
        ></nb-form>
        <el-button class="confirm-btn" type="primary" @click.native="confirmReset">确认</el-button>

      </el-form>
    </div>
    <el-footer class="footer-wrapper" :className="'login-footer'"></el-footer>

  </section>
</template>

<script>
  import ElFooter from '../layout/footer.vue'
  import NbForm from '@/components/nb-form.vue'
  import Mixin from '@/common/mixin'
  import Md5 from 'md5'
  export default {
    data () {
      return {
        resetModel: {
          old: '',
          password: '',
          password2: ''
        }
      }
    },
    mixins: [Mixin],
    components: {
      ElFooter,
      NbForm
    },
    methods: {
      confirmReset () {
        let value = this.validator(this.$refs.form)
        if (!value) {
          if (this.resetModel.old === this.resetModel.password) {
            return this.$message.warning('新密码不能与原密码相同！')
          }
          if (this.resetModel.password !== this.resetModel.password2) {
            return this.$message.warning('两次输入的密码不一样！')
          }
          let data = {
            param: {
              oldPassword: Md5(this.resetModel.old),
              password: Md5(this.resetModel.password)
            }
          }
          this.$store.dispatch('RESET_PASSWORD', data).then(res => {
            if (res.success) {
              this.$message.success('密码修改成功，请重新登录！')
              this.$store.dispatch('LOGOUT')
              setTimeout(() => {
                this.$router.push({name: 'login'})
              }, 1000)
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      }
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
.reset-wrapper{
  display:flex;
  flex-direction: column;
  height: 100%;
  .top-wrapper{
    background: white;
    width: 100%;
    border-bottom: 1px solid #e2e6ee;
    .img{
      width: 1190px;
      margin: 0 auto;
      min-width: 798px;
    }
  }
  .main-wrapper{
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    .form-content{
      width: 300px;
      .input-title {
        font-size: 24px;
        text-align: left;
        color: inherit;
        margin-bottom: 18px;
      }
      .confirm-btn {
        display: block;
        width: 100%;
        padding: 10px 20px;
        background: #2b8dff;
      }
    }
  }
  .el-form-item{
    padding: 0 !important;
  }
}
</style>
